import React from 'react';
import { StyleSheet, Text, View ,WebView} from 'react-native';
import { Logs } from 'expo';


let onMessage = (e)=>{

  let params = e.nativeEvent.data;
  params = JSON.parse(params);

};
let onLoadEnd =(e)=>{
  //Logs('WebView onLoadEnd e：',e.nativeEvent);
  let data = {
      source:'from rn',
  };
  console.log("RN Message is send.")
  this.ref.webView.postMessage('RN Message.');
  //this&&this.postMessage(JSON.stringify(data));//send message to H5
};

export default function App() {
  let it = this;
    // let {params} = it.props.navigation.state;
    let webView_style = {height: 960,width: 480};
   console.log("init it");
  return (
    <View style={styles.container}>
      {/* <Text>hello world~~~!~~!~!</Text> */}
      <WebView 
      //it.web = WebView
      ref = {webView => this.webView = webView}
      style={webView_style} 
      useWebKit={true} 
      source={{url: 'http://192.168.0.129:5000'}} 
      //  No matter loaded success or not the function above will be callback
      onLoadStart={() => {
        console.log("on Load html5 page is started");
      }}
      onLoadEnd={() => {
         let data = {
          source:'from rn',
      };
      console.log("RN Message is send.")
      this&&this.webView.postMessage("");
      }}
      //injectedJavaScript={'send the data'}
      onMessage={this.onMessage}
      javaScriptEnable={true}
      startInLoadingState={true}
      renderError={(e) =>{
        return <View/>;
      }}
      />
    </View>
  );
  
}
 onMessage = (e)=>{

  let params = e.nativeEvent.data;
  params = JSON.parse(params);

};
 onLoadEnd =(e)=>{
  //Logs('WebView onLoadEnd e：',e.nativeEvent);
  let data = {
      source:'from rn',
  };
  console.log("RN Message is send.")
  this.ref.webView.postMessage('RN Message.');
  //this&&this.postMessage(JSON.stringify(data));//send message to H5
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
